<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>技能</title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<link href="css/skill.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/demoUtils.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript">

var myScroll;

function loaded () {
	myScroll = new IScroll('#wrapper', { useTransition: false });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
	capture: false,
	passive: false
} : false);

</script>
</head>
<body onload="loaded()">
<div id="header">技能</div>

<div id="wrapper">
	<div id="scroller">
		<ul>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<div class="level"><i class="iconfont icon-xing"></i><i class="iconfont icon-xing"></i><i class="iconfont icon-xing"></i><span>了解</span></div>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
			<li>
				<div class="icon">
					<img src="image/html5.png" alt="html5">
				</div>
				<div class="content">
					<p class="category">规范</p>
					<p class="name">HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等</p>
					<p class="level">了解</p>
				</div>
			</li>
		</ul>
	</div>
</div>

<div id="footer">
	<ul class="resume">
		<li class="active">技能<i class="iconfont icon-skill"></i></li>
		<li>项目<i class="iconfont icon-project"></i></li>
		<li>经历<i class="iconfont icon-gongzuojingli"></i></li>
		<li>我<i class="iconfont icon-me"></i></li>
	</ul>
</div>

<script>
	$('.resume').find('li').on('tap',function(){
	$(this).addClass('active').siblings('li').removeClass('active');
})
</script>
</body>
</html>